<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Jamli - the lightweight Javascript Media Library</title>
	<meta name="description" content="">
	<meta name="author" content="Nicolas Crovatti">

	<link rel="stylesheet" href="/css/style.css" />
	<link rel="stylesheet" href="/css/jamli.css" />

	<script type="text/javascript" src="http://use.typekit.com/gye6stc.js"></script>
	<script type="text/javascript">try{if(!navigator.userAgent.match(/Epiphany/i)) {Typekit.load();}}catch(e){}</script>
	<script type="text/javascript">
	var onReady = function () {
		window.videoElement = window.Jamli('#myVideo');
		if(window.videoElement.isAppleMobile || !document.createElement('video').canPlayType) {
			$('.playOverlay').css({display:'none'});
			$('#jamli').css({display:'none'});
			$('.typekit-badge').css({display:'none'});
		}
	};

	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", onReady, false);
	} 
	else if (document.attachEvent) {
		document.attachEvent("onreadystatechange", onReady);
	}
		
	</script>
</head>
<body>
	<div class="wrapper">
		<div id="container">
			<div id="header">
				<h1 class="tk-lobster">Jamli</h1>
				<span class="tk-adobe-garamond-pro">the lightweight Javascript Media Library</span>
				<span class="badge"></span>
			</div>
		  	
			<div id="body">
				<!-- 
					http://camendesign.com/code/video_for_everybody
					Video for Everybody, Kroc Camen of Camen Design 
				-->
				<video width="854" height="480" poster="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-poster.jpg" id="myVideo">
					<source src="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer.mov" type="video/mp4" />
					<source src="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-480p.mp4" type="video/mp4" />
					<source src="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-480p.ogv" type="video/ogg" />
					<object width="854" height="480" type="application/x-shockwave-flash" data="/bin/player.swf">
						<param name="movie" value="/bin/player.swf" />
						<param name="flashvars" value="image=http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-poster.jpg&amp;file=http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-480p.mp4" />
						<img src="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-poster.jpg" width="720" height="404" alt="No video playback capabilities, please download the video below"
						     title="No video playback capabilities, please download the video below" />
					</object>
				</video>

			</div>
			<div>
				<p>
					<strong>Download Video:</strong>
					Closed Format:	<a href="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-480p.mp4">"MP4"</a>
					Open Format:	<a href="http://static.moblur.org/jamli-player.appspot.com/medias/sintel_trailer-480p.ogv">"Ogg"</a>
				</p>
			</div>
			<div id="footer">
			<p>
			The video is the trailer for the upcoming <a href="http://durian.blender.org/">Durian Open Movie Project, Sintel</a>.  
			by the <a href="http://www.blender.org/blenderorg/blender-foundation/">Blender Foundation</a>.
			</p>
			<p class="copyright">
			© 2010 Nicolas Crovatti — Jamli Video Player Project (<a href="http://code.google.com/p/html5-media/source/checkout">source code</a>, <a href="http://code.google.com/p/html5-media/issues/list">issues</a>)
			</p>
			</div>
	
		</div>
	
		<script src="/dist/jamli-latest.js"></script>
	</div>
</body>
</html>